<!DOCTYPE html>
<html>
<head>
    <title>待审批合同</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/css/public.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
</head>
<script type="text/javascript"></script>
<body  class="layui-anim">
<div class="x-nav">
	    <span class="layui-breadcrumb">
	        <a href="">首页</a>
	        <a>
	            <cite>合同管理</cite>
	        </a>
	    </span>
</div>
<div class="x-body">
    <!--头部检索功能-->
    <div class="layui-row" style="margin-bottom: 18px">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline" style="float: left">
                    <select class="layui-input" name="keyword1" id="keyword1">
                        <option value="">请选择用户</option>
                    </select>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
            </div>
        </form>
    </div>

    <!--数据列表-->
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

    <!--行按钮-->
    <script type="text/html" id="rowToolbar">
        <a class="layui-btn layui-btn-xs" lay-event="update"><i class="layui-icon layui-icon-edit"></i>审批</a>
    </script>

</div>
<!-- 添加/编辑框 -->
<div id="addDivID" style="display:none">
    <form class="layui-form" id="addFormID" style="margin-top:20px">
        <!--计划ID，编辑时用到，隐藏不显示-->
        <input type="hidden" id="contractId" name="contractId">
        <div class="layui-form-item">
            <div>
                <label class="layui-form-label">意见</label>
                <div class="layui-inline" style="width: 230px">
                    <textarea id="approvalOpinion" name="approvalOpinion" type="textarea" style="width: 230px; height: 100px" wrap="hard"></textarea>
                </div>
            </div>
            <div>
                <label class="layui-form-label">结果</label>
                <div class="layui-inline" style="width: 230px">
                    <select class="layui-input" name="approvalStatus" id="approvalStatus" lay-filter="approvalStatus" >
                        <option value="1">通过</option>
                        <option value="2">驳回</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" align="center">
            <div>
                <button class="layui-btn" id="subBtn" lay-submit lay-filter="addForm">立即提交</button>
                <button  class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['table','layer','upload','form','laydate'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        /*检索按钮调用的方法*/
        var $ = layui.jquery, active = {
            reload:function () {
                var keyword01 = $("#keyword1").val();
                table.reload('contentTable',{
                    method:'get',
                    where:{"userId":keyword01}
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            }
        }

        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        /*班组类型数据列表*/
        table.render({
            elem: '#tableList'
            ,url:'/work/queryApprovalContract'
            ,title: '工作计划'
            ,id :'contentTable'
            ,limits:[10,20,30]
            ,toolbar: '#toolbar'
            ,cols: [
                [
                    {field:'contractId', title:'序号', sort: true, type:'numbers', width: 60}
                    ,{field:'contractNumber', title:'合同编号', width: 150}
                    ,{field:'contractTitle', title:'合同标题', width: 150}
                    ,{field:'customerName', title:'客户名称', width: 150}
                    ,{field:'contractDate', title:'签约时间', width: 200}
                    ,{field:'principalName', title:'负责人', width: 150}
                    ,{field:'ourUndersigned', title:'我方签约人', width: 150}
                    ,{field:'clientUndersigned', title:'客户方签约人', width: 150}
                    ,{field:'contractStartDate', title:'合同开始时间', width: 200}
                    ,{field:'contractEndDate', title:'合同结束时间', width: 200}
                    ,{field:'contractStatus', title:'合同状态', width: 150, templet: function (row){
                        if(row.contractStatus == 0){
                            return "执行中";
                        } else if(row.contractStatus == 1){
                            return "成功结束";
                        }else{
                            return "意外终止";
                        }
                    }}
                    ,{field:'contractAmount', title:'合同总金额', width: 150}
                    ,{field:'paymentMethod', title:'付款方式', width: 150, templet: function (row){
                        if(row.paymentMethod == 0){
                            return "对公账户";
                        } else if(row.paymentMethod == 1){
                            return "对私账户";
                        }else if(row.paymentMethod == 2){
                            return "现金";
                        }else{
                            return "分期";
                        }
                    }}
                    ,{field:'attachmentLocation', title:'附件', width: 100, templet: function(d) {
                        return d.attachmentLocation == undefined ? false : true;
                    }}
                    ,{field:'approvalName', title:'审批人', width: 100}
                    ,{field:'approvalStatus', title:'审批状态', width: 100, templet: function (row){
                        if(row.approvalStatus == 2){
                            return "驳回";
                        } else if(row.approvalStatus == 1){
                            return "通过";
                        }else{
                            return "未审批";
                        }
                    }}
                    ,{field:'approvalTime', title:'审批时间', width: 200}
                    ,{field:'approvalOpinion', title:'审批意见', width: 200}
                    ,{field:'remark', title:'备注', width: 150}
                    ,{fixed:'right',unresize: true, title:'操作', toolbar: '#rowToolbar',width:100, align: 'center'}
                ]
            ]
            ,page: true
            ,done : function(){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
        });

        //行按钮(编辑)
        table.on('tool(tableList)', function(obj){
            var data = obj.data;
            /*编辑*/
            if (obj.event === 'update') {
                layer.open({
                    type: 1 					//Page层类型
                    ,area: ['450px', '400px'] 	//宽  高
                    ,title: '编辑'
                    ,shade: 0.6 				//遮罩透明度
                    ,maxmin: true 				//允许全屏最小化
                    ,anim: 1 					//0-6的动画形式，-1不开启
                    ,content:$('#addDivID')
                    ,success: function(){
                        $("#approvalOpinion").val("");
                        //数据回显,获取ID
                        for(var i=0;i<Object.entries(data).length;i++) {
                            var id = '#' + Object.entries(data)[i][0];
                            var text = Object.entries(data)[i][1];
                            $(id).val(text);
                        }
                        form.render();
                    }
                });
            }
        });

        /**
         * 表单校验
         */
        form.verify({
            //value：表单的值、item：表单的DOM对象
            request: function(value, item){
                if(value == ''){
                    return '不能为空';
                }
            }
        });

        /**
         * 表单提交(新增、编辑)
         */
        form.on('submit(addForm)', function () {
            //var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
            var id = $.trim($("#contractId").val());
            var url = "";
            var title = "";
            if(id != "" && id != null && id != 'undefined'){
                title = "编辑";
                url = '/work/updateContractStatus';
            }
            console.log(url);
            console.log($("#addFormID").serialize());
            $.ajax({
                type:'post',
                url:url,
                data:$("#addFormID").serialize(),
                cache:false,
                dataType: 'JSON',
                success:function(data){
                    if (data > 0) {
                        layer.closeAll();
                        setTimeout(function(){
                            layer.msg(title+'成功！',{icon:6});
                        },1000);
                        table.reload('contentTable',{
                            method:'get',
                            page: {
                                curr: 1//重新从第 1 页开始
                            }
                        });
                    } else {
                        layer.msg(title+'失败！',{icon:5});
                        layer.close(index);
                    }
                }
            });
            return false;
        });
    });

    /*下拉框查找所有用户*/
    function addSelectUser() {
        $('#principalId').empty();
        $.ajax({
            type: 'POST',
            url: '/work/getAllUser',
            dataType: 'json',
            async: false,
            success: function (datas){
                for (var i = 0; i < datas.length; i++) {
                    $("#principalId").append("<option value='"+ datas[i].userId +"'>"+ datas[i].realName +"</option>");
                    $("#approvalId").append("<option value='"+ datas[i].userId +"'>"+ datas[i].realName +"</option>");
                }
            }
        });
    }

    /*下拉框查找所有客户*/
    function addSelectSupplier() {
        $('#principalId').empty();
        $.ajax({
            type: 'POST',
            url: '/supplier/queryAllByMution',
            dataType: 'json',
            async: false,
            success: function (datas){
                for (var i = 0; i < datas.length; i++) {
                    $("#customerId").append("<option value='"+ datas[i].sid +"'>"+ datas[i].sname +"</option>");
                    $("#keyword1").append("<option value='"+ datas[i].sid +"'>"+ datas[i].sname +"</option>");
                }
            }
        });
    }

    window.onload = addSelectSupplier();
    window.onload = addSelectUser();
</script>
</body>
</html>
